<template>
  <el-aside class="el-aside1" :width="!isCollapse ? '200px' : '64px'">
    <el-menu :default-active="activeIndex" router class="el-menu-demo" :collapse="isCollapse" background-color="#303030"
      text-color="#eeeeee" active-text-color="#ffd04b" :default-openeds="['1', '2', '_integral','activity_mgmt']">
      <ElSubMenu index="1">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>账户管理</span>
        </template>
        <el-menu-item index="User" :route="router.user">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu1" />
          </svg>
          <template #title>题库用户</template>
        </el-menu-item>
        <el-menu-item index="uservip" :route="router.uservip">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu1" />
          </svg>
          <template #title>精选题库用户</template>
        </el-menu-item>
      </ElSubMenu>
      <el-menu-item index="team" :route="router.team">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tiku" />
        </svg>
        <template #title>团队管理</template>
      </el-menu-item>
      <ElSubMenu index="2">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>题库管理</span>
        </template>
        <el-menu-item index="questionbank" :route="router.questionbank">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>题单管理</template>
        </el-menu-item>
        <el-menu-item index="question" :route="router.question">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>题目管理</template>
        </el-menu-item>
        <el-menu-item index="label" :route="router.label">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>标签管理</template>
        </el-menu-item>
      </ElSubMenu>
      <ElSubMenu index="activity_mgmt">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huodong" />
          </svg>
          <span>比赛管理</span>
        </template>
        <el-menu-item index="Activity" :route="router.Activity">
          <el-icon>
            <Setting></Setting>
          </el-icon>
          <template #title>比赛配置</template>
        </el-menu-item>
        <el-menu-item index="matchLabel" :route="router.matchLabel">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>类别配置</template>
        </el-menu-item>
      </ElSubMenu>
      <!-- <ElSubMenu index="_integral">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>积分</span>
        </template>
        <el-menu-item index="integral" :route="router.integral">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>积分记录</template>
        </el-menu-item>
        <el-menu-item index="integrallist" :route="router.integrallist">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>积分列表</template>
        </el-menu-item>
      </ElSubMenu> -->
      <el-menu-item class="isCollapse" :route="route" @click="() => setisCollapse(!isCollapse)">
        <el-icon>
          <ArrowLeft v-show="!isCollapse"></ArrowLeft>
          <ArrowRight v-show="isCollapse"></ArrowRight>
        </el-icon>
        <template #title>收回</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { ElAside, ElMenu, ElMenuItem, ElSubMenu } from 'element-plus';
import { ref } from "vue";
import { useRoute } from "vue-router";
import * as router from "../../admin/views/data/router";
type P = {
  isCollapse: boolean
  setisCollapse: Function
}
defineProps<P>()
const route = useRoute()

const activeIndex = ref('')




</script>


<style scoped>
.el-menu-demo {
  min-height: 100%;
  overflow-y: auto;
}


.w-200 {
  width: 200px;
  overflow: hidden;
}

.w-64 {
  width: 64px;
  overflow: hidden;
}

.el-aside1 {
  transition: all 0.3s;
}

.icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>
